<template>
  <div>
    <el-card>
      <el-row :gutter="10">
        <el-col :span="4">
          <el-input placeholder="请输入权限名称" v-model="powerListReqForm.powerName">
            <el-button slot="append" icon="el-icon-search" @click="SearchBtnClick"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-input placeholder="请输入权限路径" v-model="powerListReqForm.powerPath">
            <el-button slot="append" icon="el-icon-search" @click="SearchBtnClick"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-input placeholder="请输入权限分组" v-model="powerListReqForm.powerGroup">
            <el-button slot="append" icon="el-icon-search" @click="SearchBtnClick"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-row>
            <el-col :span="12">
              <el-select v-model="statusSelect" placeholder="请选择" style="float:right;">
                <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="12">
              <el-button icon="el-icon-search" style="background-color: #f5f7fa; float:left;" @click="SearchBtnClick"></el-button>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8" style="text-align: right;">
          <el-button type="primary" size="mini" @click="addPowerBtnClick">添加权限</el-button>
        </el-col>
      </el-row>
      <!-- 权限列表-->
      <el-table :data="powerList" border>
        <el-table-column label="No" type="index"></el-table-column>
        <el-table-column label="权限名称" prop="powerName" min-width="200"></el-table-column>
        <el-table-column label="权限路径" prop="powerPath" min-width="200"></el-table-column>
        <el-table-column label="权限分组" prop="powerGroup" min-width="200"></el-table-column>
        <el-table-column label="权限访问" prop="powerAccessMethod" min-width="200"></el-table-column>
        <el-table-column label="状态" width="300">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.powerStatus" @change="powerStatusChange(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="editBtnClick(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="deleteBtnClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="powerListReqForm.pageNum"
        :page-sizes="[10, 20, 30, 40]" :page-size="powerListReqForm.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
    <el-dialog v-dialogDrag title="添加权限" :visible.sync="addPowerDialog" width="40%" center @closed="addPowerDialogClosed" @opened="addPowerDialogOpen"
      :close-on-click-modal="false">
      <span style="text-align: center">
        <el-form ref="addPowerFormRef" :model="addPowerForm" :rules="addPowerFormRules" label-position="right"
          label-width="80px">
          <!--权限分组-->
          <el-form-item label="权限分组" prop="powerGroup" v-on:keyup.enter.native="addPower">
            <el-input ref="powerGroupInputRef" v-model="addPowerForm.powerGroup"></el-input>
          </el-form-item>
          <!--权限名称-->
          <el-form-item label="权限名称" prop="powerName" v-on:keyup.enter.native="addPower">
            <el-input v-model="addPowerForm.powerName"></el-input>
          </el-form-item>
          <!--权限路径-->
          <el-form-item label="权限路径" prop="powerPath" v-on:keyup.enter.native="addPower">
            <el-input v-model="addPowerForm.powerPath"></el-input>
          </el-form-item>
          <el-form-item label="权限访问" prop="powerAccessMethodList" v-on:keyup.enter.native="editPower">
            <el-checkbox-group v-model="addPowerForm.powerAccessMethodList" style="text-align: left;">
              <el-checkbox label="后台"></el-checkbox>
              <el-checkbox label="平板"></el-checkbox>
              <el-checkbox label="PDA"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
        <div>
          <el-button type="primary" @click="addPower">提交</el-button>
        </div>
      </span>
    </el-dialog>
    <el-dialog v-dialogDrag title="编辑权限" :visible.sync="editPowerDialog" width="40%" @closed="editPowerDialogClosed" center
      :close-on-click-modal="false">
      <span style="text-align: center">
        <el-form ref="powerDataFormRef" :model="powerDataForm" :rules="powerDataFormRules" label-position="right"
          label-width="80px">
          <!--权限分组-->
          <el-form-item label="权限分组" prop="powerGroup" v-on:keyup.enter.native="editPower">
            <el-input v-model="powerDataForm.powerGroup"></el-input>
          </el-form-item>
          <!--权限名称-->
          <el-form-item label="权限名称" prop="powerName" v-on:keyup.enter.native="editPower">
            <el-input v-model="powerDataForm.powerName"></el-input>
          </el-form-item>
          <!--权限路径-->
          <el-form-item label="权限路径" prop="powerPath" v-on:keyup.enter.native="editPower">
            <el-input v-model="powerDataForm.powerPath"></el-input>
          </el-form-item>
          <el-form-item label="权限访问" prop="powerAccessMethodList" v-on:keyup.enter.native="editPower">
            <el-checkbox-group v-model="powerDataForm.powerAccessMethodList" style="text-align: left;">
              <el-checkbox label="后台"></el-checkbox>
              <el-checkbox label="平板"></el-checkbox>
              <el-checkbox label="PDA"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
        <div style="margin-top: 20px;">
          <el-button type="primary" @click="editPower">提交</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Power',
  data () {
    return {
      powerList: [],
      addPowerDialog: false,
      editPowerDialog: false,
      powerListReqForm: {
        pageNum: 1,
        pageSize: 10,
        powerName: '',
        powerPath: '',
        powerGroup: ''
      },
      total: 0,
      addPowerForm: {
        powerName: '',
        powerPath: '',
        powerGroup: '',
        powerAccessMethodList: ['后台', '平板', 'PDA']
      },
      addPowerFormRules: {
        powerGroup: [{
          required: true,
          message: '请输入权限分组',
          trigger: 'blur'
        }],
        powerName: [{
          required: true,
          message: '请输入权限名称',
          trigger: 'blur'
        }],
        powerPath: [{
          required: true,
          message: '请输入权限路径',
          trigger: 'blur'
        }],
        powerAccessMethodList: [{
          type: 'array',
          required: true,
          message: '请至少选择一个权限访问',
          trigger: 'change'
        }]
      },
      powerDataForm: {
        powerGroup: '',
        powerName: '',
        powerPath: '',
        powerAccessMethodList: []
      },
      powerDataFormRules: {
        powerGroup: [{
          required: true,
          message: '请输入权限分组',
          trigger: 'blur'
        }],
        powerName: [{
          required: true,
          message: '请输入权限名称',
          trigger: 'blur'
        }],
        powerPath: [{
          required: true,
          message: '请输入权限路径',
          trigger: 'blur'
        }],
        powerAccessMethodList: [{
          type: 'array',
          required: true,
          message: '请至少选择一个权限访问',
          trigger: 'change'
        }]
      },
      statusSelect: 'all',
      statusOptions: [
        {
          value: 'all',
          label: '全部'
        },
        {
          value: 'true',
          label: '开启'
        },
        {
          value: 'false',
          label: '冻结'
        }
      ]
    }
  },
  methods: {
    async getPowerList () {
      if (this.statusSelect === 'true') {
        this.powerListReqForm.powerStatus = true
      } else if (this.statusSelect === 'false') {
        this.powerListReqForm.powerStatus = false
      } else if (this.statusSelect === 'all') {
        delete (this.powerListReqForm.powerStatus)
      }
      const res = await this.$apiUtil.postByJson('power/list', this.powerListReqForm)
      console.log(res)
      if (res.code !== '200') {
        return this.$message.error(res.msg)
      }
      this.powerList = res.data.powerVOS
      this.total = res.data.totalSize
    },
    addPowerBtnClick () {
      this.addPowerDialog = true
    },
    addPowerDialogOpen () {
      this.$refs.powerGroupInputRef.focus()
    },
    addPowerDialogClosed () {
      this.$refs.addPowerFormRef.resetFields()
    },
    addPower () {
      this.$refs.addPowerFormRef.validate(async valid => {
        if (!valid) return
        const res = await this.$apiUtil.postByJson('power/create', this.addPowerForm)
        console.log(res)
        if (res.code !== '200') {
          return this.$message.error(res.msg)
        }
        this.$message.success('添加权限成功')
        this.getPowerList()
        this.addPowerDialog = false
      })
    },
    deleteBtnClick (row) {
      this.$alert('确定删除权限:' + row.powerName + ' ! ! !', '提示', {
        confirmButtonText: '确定',
        center: true,
        callback: async action => {
          if (action === 'confirm') {
            const res = await this.$apiUtil.postByForm('power/delete', { powerId: row.powerId })
            console.log(res)
            if (res.code !== '200') {
              return this.$message.error(res.msg)
            }
            this.$message.success('删除权限成功')
            this.getPowerList()
          }
        }
      })
    },
    async powerStatusChange (row) {
      const res = await this.$apiUtil.postByForm('power/changeStatus', { powerId: row.powerId })
      console.log(res)
      if (res.code !== '200') {
        row.powerStatus = !row.powerStatus
        return this.$message.error(res.msg)
      }
      this.$message.success('修改权限状态成功')
      this.getPowerList()
    },
    editBtnClick (row) {
      this.editPowerDialog = true
      if (row.powerAccessMethod === null) {
        row.powerAccessMethod = ''
      }
      row.powerAccessMethodList = row.powerAccessMethod.split('||')
      this.powerDataForm = Object.assign({}, row)
    },
    editPowerDialogClosed () {
      this.$refs.powerDataFormRef.resetFields()
    },
    editPower () {
      this.$refs.powerDataFormRef.validate(async valid => {
        if (!valid) return
        const res = await this.$apiUtil.postByJson('power/edit', this.powerDataForm)
        console.log(res)
        if (res.code !== '200') {
          return this.$message.error(res.msg)
        }
        this.$message.success('编辑菜单成功')
        this.editPowerDialog = false
        this.getPowerList()
      })
    },
    handleSizeChange (newSize) {
      this.powerListReqForm.pageSize = newSize
      this.getPowerList()
    },
    handleCurrentChange (newPage) {
      this.powerListReqForm.pageNum = newPage
      this.getPowerList()
    },
    SearchBtnClick () {
      this.getPowerList()
    }
  },
  created () {
    this.getPowerList()
  }
}
</script>

<style lang="less" scoped>
</style>
